<template>
  <div>
    <div style="padding:10px">
      <el-input
        v-model="searchText"
        placeholder="请输入字典名称"
        style="width:180px"
      ></el-input>
      <el-button type="success" @click="searchbtn()">搜索</el-button>
      <el-button type="primary" @click="resetbtn()">重置</el-button>
    </div>
    <div style="padding:10px">
      <el-button type="success" @click="addBtn()">添加</el-button>
      <el-button type="primary" @click="editBtn()">修改</el-button>
      <el-button type="danger" @click="deleteDicionary()">删除</el-button>
    </div>
    <generaltable
      :headerData="headerData"
      :tableData="tableData"
      :tableCellClick="tableCellClick"
      :ispagination="false"
    >
      <template v-slot:operation="{row}">
        <el-button type="text" class="el-icon-edit" @click="editBtn(row)"
          >修改</el-button
        >
        <el-button type="text" class="el-icon-delete" @click="deleteDicionary()"
          >删除</el-button
        >
      </template>
    </generaltable>
    <el-dialog
      :title="isAdddialog ? '添加字典' : '修改字典'"
      :visible.sync="isDialog"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
      >
        <el-form-item prop="dicionaryName" label="名称">
          <el-input v-model="ruleForm.dicionaryName"></el-input>
        </el-form-item>
        <el-form-item
          v-for="(item, index) in ruleForm.dicionarys"
          :label="'字典' + (index + 1)"
          :key="item.key"
          :prop="'dicionarys.' + index + '.lexicalValue'"
          :rules="{
            required: true,
            message: '字典不能为空',
            trigger: 'blur'
          }"
        >
          <el-row type="flex">
            <el-col :span="11"
              ><el-input :value="index + 1" :disabled="true"></el-input
            ></el-col>
            <el-col :span="1"></el-col>
            <el-col :span="11"
              ><el-input
                v-model="item.lexicalValue"
                placeholder="请输入字典值"
              ></el-input
            ></el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button @click="submit('ruleForm')">提交</el-button>
          <el-button @click="addlexical()">新增字典</el-button>
          <el-button @click="cancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  dictionaryData,
  dictionaryAdd,
  dictionarySearch,
  dictionaryModify,
  dictionaryDelete
} from "@/api/DictionaryManagement.js";
import generaltable from "@/components/generaltable.vue";
export default {
  name: "DictionaryManagement",
  data() {
    return {
      searchText: "",
      isAdddialog: false,
      isDialog: false,
      ruleForm: {
        dicionaryName: "",
        dicionarys: [
          {
            lexicalValue: ""
          }
        ]
      },
      rules: {
        dicionaryName: {
          required: true,
          message: "请输入字典名称",
          trigger: "blur"
        }
      },
      currentrow: [],
      headerData: [
        {
          prop: "id",
          label: "ID"
        },
        {
          prop: "name",
          label: "名称"
        },
        {
          prop: "detail",
          label: "详情"
        },
        {
          prop: "operation",
          label: "操作",
          slot: true
        }
      ],
      tableData: []
    };
  },
  mounted() {
    let _self = this;
    _self.obtainDictionaryData();
  },
  methods: {
    tableCellClick(row) {
      let _self = this;
      _self.currentrow = row;
    },
    obtainDictionaryData() {
      let _self = this;
      dictionaryData().then(res => {
        if (res.code == 20000) {
          _self.tableData = [];
          for (let item of res.data) {
            _self.tableData.push(item);
          }
        }
      });
    },
    addBtn() {
      let _self = this;
      _self.isAdddialog = true;
      _self.isDialog = true;
      _self.ruleForm.dicionaryName="";
      _self.ruleForm.dicionarys=[
          {
            lexicalValue: ""
          }
        ]
    },
    addDictionary() {
      let _self = this;
      let data = {
        dictName: _self.ruleForm.dictName,
        dictValues: _self.dictValues(_self.ruleForm.dicionarys)
      };
      dictionaryAdd(data).then(res => {
        if (res.code == 20000) {
        }
      });
    },
    addlexical() {
      let _self = this;
      _self.ruleForm.dicionarys.push({
        lexicalValue: ""
      });
    },
    cancel() {
      let _self = this;
      _self
        .$confirm("确认取消操作", "提示", { type: "warning" })
        .then(() => {
          _self.isDialog = false;
        })
        .catch(() => {
          _self.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    editBtn() {
      let _self = this;
      _self.isAdddialog = false;
      _self.isDialog = true;
    },
    edit() {
      let _self = this;
      if (_self.currentrow.length !== 0) {
        let data = {
          id: _self.currentrow.id
        };
        dictionaryModify(data).then(res => {
          if (res.code == 20000) {
            _self.isDialog = false;
            _self.obtainDictionaryData();
          }
        });
      } else {
        _self.$message({
          type: "warning",
          message: "请选择操作项!"
        });
      }
    },
    deleteDicionary() {
      let _self = this;
      if (_self.currentrow.length !== 0) {
        _self
          .$confirm("确认删除改记录", "提示", { type: "warning" })
          .then(() => {
            let data = {
              id: _self.currentrow.id
            };
            dictionaryDelete(data).then(res => {
              if (res.code == 20000) {
                _self.$message({
                  type: "success",
                  message: "删除成功"
                });
                _self.obtainDictionaryData();
              }
            });
          })
          .catch(() => {
            _self.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        _self.$message({
          type: "warning",
          message: "请选择操作项!"
        });
      }
    },
    submit() {
      let _self = this;
      _self.$refs.ruleForm.validate(valid => {
        if (valid) {
          let data = {
            dictName: _self.ruleForm.dicionaryName,
            dictValues: _self.editValue(_self.ruleForm.dicionarys)
          };
          dictionaryAdd(data).then(res => {
            _self.$message({
              type: "success",
              message: "添加成功"
            });
            _self.isDialog = false;
            _self.ruleForm.dicionarys = [
              {
                lexicalValue: ""
              }
            ];
            _self.$refs.ruleForm.resetFields();
            _self.obtainDictionaryData();
          });
        } else {
           callback();
        }
      });
    },
    editValue(val) {
      let data = [];
      for (let i in val) {
        data.push(i + 1 + ":" + val[i].lexicalValue);
      }
      return data.join(";");
    },
    searchbtn() {
      let _self = this;
      let data = {
        dictName: _self.searchText
      };
      dictionarySearch(data).then(res => {
        _self.tableData = [];
        for (let item of res.data) {
          _self.tableData.push(item);
        }
      });
    },
    resetbtn() {
      let _self = this;
      _self.searcText = "";
      _self.obtainDictionaryData();
    },
    editBtn(row){
      let _self=this;
      console.log(row)
      _self.isDialog=true;
      _self.isAdddialog=false;
      _self.$nextTick(()=>{
        _self.ruleForm.dicionaryName=row.name;
        let data=(row.detail).split(",")
        _self.ruleForm.dicionarys=[];
        for(let item of data){
          let dataB=item.split(":");
          _self.ruleForm.dicionarys.push({lexicalValue:dataB[1]});
          }
      })
    }
  },
  components: {
    generaltable
  }
};
</script>
<style scoped></style>
